<script setup lang="ts">
import { useMerge } from 'co-utils-vue';
import type { FormInstance } from 'element-plus';

import { updateUserInfo } from '@/api/user';
import { User } from '@/api/user/type';

const formRulesRef = ref<FormInstance>();
const emits = defineEmits<{(event: 'on-update'):void;
}>();
const props = withDefaults(defineProps<{
  info: User.IUserInfoResponse;
}>(), {
  info: () => ({} as User.IUserInfoResponse)
});
const formModel = ref<User.IUserInfoResponse>(props.info);
console.log(formModel.value);
watch(() => props.info, () => {
  formModel.value = useMerge(formModel.value, props.info);
});
const isLoading = ref(false);
const handleSubmit = async () => {
  try {
    await updateUserInfo(formModel.value);
    emits('on-update');
  } catch (error) {
    isLoading.value = false;
  }
};
</script>

<template>
  <div class="cz-p-2">
    <el-form
      ref="formRulesRef"
      label-position="right"
      label-width="80px"
      :model="formModel"
    >
      <el-form-item label="邮箱">
        <el-input
          v-model="formModel.email"
          placeholder="邮箱"
        />
      </el-form-item>
      <el-form-item
        label="电话"
      >
        <el-input
          v-model="formModel.phone"
          placeholder="电话"
        />
      </el-form-item>
      <el-form-item
        label="性别"
      >
        <el-radio-group
          v-model="formModel.gender"
        >
          <el-radio
            :value="1"
            :label="1"
          >
            <el-icon><Male /></el-icon>
          </el-radio>
          <el-radio
            :value="2"
            :label="2"
          >
            <el-icon><Female /></el-icon>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="签名"
      >
        <el-input
          v-model="formModel.motto"
          :maxlength="100"
          show-word-limit
          type="textarea"
          placeholder="签名"
        />
      </el-form-item>
    </el-form>
    <div class="cz-flex cz-justify-center">
      <el-button
        type="primary"
        icon="Check"
        :loading="isLoading"
        @click="handleSubmit"
      >
        提交
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
